<template>
	<view>
		<!-- 导航栏 -->
		<navView  :title="material.materialName"></navView>
		
		<!-- 主内容部分 -->
		<view class="mainContent">
			<!-- 详情 -->
			<view class="detailPart">
				<view class="scoreView">
					<view class="scoreView-title">综合得分</view>
					<view class="scoreView-score">{{orderMaterial.score}}</view>
				</view>
				<view class="line"></view>
				<view class="detail">
					<view class="detail-row">
						<view class="detail-title">采购企业：</view>
						<view class="detail-description">{{orderMaterial.supplier}}</view>
						<view class="detail-title">船&nbsp;&nbsp;&nbsp;&nbsp;号：</view>
						<view class="detail-description">{{orderMaterial.shipName}}</view>
					</view>
					<view class="detail-row">
						<view class="detail-title">数&nbsp;&nbsp;&nbsp;&nbsp;量：</view>
						<view class="detail-description">{{orderMaterial.buycount}}吨</view>
						<view class="detail-title">价&nbsp;&nbsp;&nbsp;&nbsp;格：</view>
						<view class="detail-description">{{orderMaterial.price}}元</view>
						<view class="detail-title">吨度价：</view>
						<view class="detail-description">{{orderMaterial.tonPrice}}元</view>
					</view>
					<view class="detail-row">
						<view class="detail-title">Fe：</view>
						<view class="detail-description">{{orderMaterial.Fe}}吨</view>
						<view class="detail-title">P：</view>
						<view class="detail-description">{{orderMaterial.P}}元</view>
						<view class="detail-title">SiO2：</view>
						<view class="detail-description">{{orderMaterial.SiO2}}元</view>
					</view>
					<view class="detail-row">
						<view class="detail-title">H2O：</view>
						<view class="detail-description">{{orderMaterial.H2O}}吨</view>
						<view class="detail-title">Al2O3：</view>
						<view class="detail-description">{{orderMaterial.Al2O3}}元</view>
						<view class="detail-title">S：</view>
						<view class="detail-description">{{orderMaterial.S}}元</view>
					</view>
					<view class="detail-row">
						<view class="detail-title">采购日期：</view>
						<view class="detail-description">{{orderMaterial.date}}吨</view>
						<view class="detail-title">采购员：</view>
						<view class="detail-description">{{orderMaterial.buyer}}元</view>
					</view>
				</view>
			</view>
			
			<!-- 成分表 -->
			<view class="composition">
				<view class="composition-title">检测成分</view>
				<table class="materialDetail-table" cellSpacing="0">
					<tr>
						<th class="materialDetail-table-th">P</th>
						<td class="materialDetail-table-td">{{orderMaterial.ingredientsJson.p}}</td>
						<th class="materialDetail-table-th">Na2O</th>
						<td class="materialDetail-table-td">{{orderMaterial.ingredientsJson.na2O}}</td>
					</tr>
					<tr>
						<th class="materialDetail-table-th">S</th>
						<td class="materialDetail-table-td">{{orderMaterial.ingredientsJson.s}}</td>
						<th class="materialDetail-table-th">Pb</th>
						<td class="materialDetail-table-td">{{orderMaterial.ingredientsJson.pb}}</td>
					</tr>
					<tr>
						<th class="materialDetail-table-th">As</th>
						<td class="materialDetail-table-td">{{orderMaterial.ingredientsJson.as}}</td>
						<th class="materialDetail-table-th">Zn</th>
						<td class="materialDetail-table-td">{{orderMaterial.ingredientsJson.zn}}</td>
					</tr>
					<tr>
						<th class="materialDetail-table-th">Fe</th>
						<td class="materialDetail-table-td">{{orderMaterial.ingredientsJson.fe}}</td>
						<th class="materialDetail-table-th">Cu</th>
						<td class="materialDetail-table-td">{{orderMaterial.ingredientsJson.cu}}</td>
					</tr>
					<tr>
						<th class="materialDetail-table-th">SiO2</th>
						<td class="materialDetail-table-td">{{orderMaterial.ingredientsJson.sIO2}}</td>
						<td class="materialDetail-table-th">烧损</td>
						<td class="materialDetail-table-td">{{orderMaterial.ingredientsJson.sparkler}}</td>
					</tr>
					<tr>
						<th class="materialDetail-table-th">CaO</th>
						<td class="materialDetail-table-td">{{orderMaterial.ingredientsJson.caO}}</td>
						<th class="materialDetail-table-th">Cr</th>
						<td class="materialDetail-table-td">{{orderMaterial.ingredientsJson.cr}}</td>
					</tr>
					<tr>
						<th class="materialDetail-table-th">Mgo</th>
						<td class="materialDetail-table-td">{{orderMaterial.ingredientsJson.mgo}}</td>
						<th class="materialDetail-table-th">水分含量</th>
						<td class="materialDetail-table-td">{{orderMaterial.ingredientsJson.humidity}}</td>
					</tr>
					<tr>
						<th class="materialDetail-table-th">Al2O3</th>
						<td class="materialDetail-table-td">{{orderMaterial.ingredientsJson.aL2O3}}</td>
						<th class="materialDetail-table-th">粒度&gt;0.8mm</th>
						<td class="materialDetail-table-td">{{orderMaterial.ingredientsJson.cu}}</td>
					</tr>
					<tr>
						<th class="materialDetail-table-th">MnO</th>
						<td class="materialDetail-table-td">{{orderMaterial.ingredientsJson.aL2O3}}</td>
						<th class="materialDetail-table-th">粒度&lt;0.5mm</th>
						<td class="materialDetail-table-td">{{orderMaterial.ingredientsJson.cu}}</td>
					</tr>
					<tr>
						<th class="materialDetail-table-th">TiO2</th>
						<td class="materialDetail-table-td">{{orderMaterial.ingredientsJson.tiO2}}</td>
						<th class="materialDetail-table-th">Ni</th>
						<td class="materialDetail-table-td">{{orderMaterial.ingredientsJson.ni}}</td>
					</tr>
					<tr>
						<th class="materialDetail-table-th">FeO</th>
						<td class="materialDetail-table-td">{{orderMaterial.ingredientsJson.feO}}</td>
						<th class="materialDetail-table-th">K2O</th>
						<td class="materialDetail-table-td">{{orderMaterial.ingredientsJson.k2O}}</td>
					</tr>
					<tr>
						<th class="materialDetail-table-th">过筛率(200目筛，干筛)</th>
						<td class="materialDetail-table-td">{{orderMaterial.ingredientsJson.percentPassing}}</td>
						<th class="materialDetail-table-th"></th>
						<td class="materialDetail-table-td"></td>
					</tr>
				</table>
			</view>
		</view>
	</view>
</template>

<script>
	import navView from '../../components/navView.vue'
	export default {
		components:{
			navView
		},
		data() {
			return {
				//当前物料
				material: {},
				//当前物料订单
				orderMaterial: {
					ingredientsJson: {}
				},
			}
		},
		onLoad(option) {
			this.material = JSON.parse(option.material)
			this.requestOrderMaterial()
		},
		methods: {
			//查询订单物料详情
			requestOrderMaterial() {
				this.$u.api.requestOrderMaterialInfoByPkid(this.material.pkid).then(res => {
					this.orderMaterial = res;
				}).catch(err => {
					console.error(err)
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.mainContent {
		background-color: #F5F5F5;
		width: 100%;
		height: 100%;
		position: absolute;
	}
	
	.detailPart {
		background-color: #FFFFFF;
		padding: 20rpx 30rpx;
	}
	.scoreView {
		height: 70rpx;
	}
	
	.scoreView-title {
		line-height: 70rpx;
		font-size: 26rpx;
		color: #333333;
		float: left;
	}
	
	.scoreView-score {
		float: left;
		width: 44rpx;
		height: 44rpx;
		line-height: 44rpx;
		margin: 13rpx 15rpx;
		background-color: #1cbd7a;
		border-radius: 50%;
		color: #FFFFFF;
		font-size: 18rpx;
		text-align: center;
	}
	
	.line {
		height: 1rpx;
		background: #F3F3F3;
	}
	
	.detail {
		padding: 15rpx 0rpx;
	}
	
	.detail-row {
		height: 50rpx;
	}
	
	.detail-title {
		font-size: 22rpx;
		color: #333333;
		line-height: 50rpx;
		float: left;
	}
	
	.detail-description {
		font-size: 22rpx;
		color: #7C7B7B;
		line-height: 50rpx;
		float: left;
		margin-right: 50rpx;
	}
	
	.composition {
		margin: 30rpx;
		padding: 30rpx 20rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
	}
	
	.composition-title {
		font-size: 28rpx;
		color: #333333;
	}
	
	.materialDetail-table {
		margin-top: 25rpx;
		font-size: 20rpx;
		text-align: center;
		border-right: 1rpx solid #000000;
		border-bottom: 1rpx solid #000000;
	}
	
	.materialDetail-table-th {
		background-color: #f2f2f2;
		width: 190rpx;
		height: 48rpx;
		border-left: 1rpx solid #000000;
		border-top: 1rpx solid #000000;
	}
	
	.materialDetail-table-td {
		width: 135rpx;
		height: 48rpx;
		border-left: 1rpx solid #000000;
		border-top: 1rpx solid #000000;
	}
	
</style>
